@mobile-max-width: 1024px;
#common() {
    .mobile(@style) {
        @media screen and (max-width: @mobile-max-width) {
            @style();
        }
    }
    .pc(@style) {
        @media screen and (min-width: @mobile-max-width) {
            @style();
        }
    }
    .scrollbar() {
        @scrollbar-color: #66ccff;
        // moz
        * {
            scrollbar-color: lighten(@scrollbar-color, 20%) lighten(@scrollbar-color, 28%);
            scrollbar-width: thin;
        }
        // webkit
        *::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background-color: lighten(@scrollbar-color, 28%);
        }
        *::-webkit-scrollbar-thumb {
            background-color: lighten(@scrollbar-color, 20%);
            border-radius: 6px;
            transition: background-color 0.3s;
        }
        *::-webkit-scrollbar-thumb:hover {
            background-color: lighten(@scrollbar-color, 10%);
        }
        *::-webkit-scrollbar-thumb:active {
            background-color: @scrollbar-color;
        }
    }
}

#animation() {
    .spin () {
        /* 旋转360度 */
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    }
    .wordsLoop(@width) {
        @-webkit-keyframes wordsLoop {
            0%,
            20% {
                transform: translateX(0px);
            }
            45%,
            55% {
                transform: translateX(calc(-100% + @width));
            }
            80%,
            100% {
                transform: translateX(0px);
            }
        }
    }
}
